import React from 'react'
import { Row, Col, Tabs, Carousel, Layout } from 'antd'
import PCNewsBlock from './pc_news_block'
import PCBewsImageBlock from './pc_news_image_block'
import PCProduct from './pc_product';
const { Content } = Layout;

const TabPane = Tabs.TabPane;

function PCNewsContainer() {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    autoplay: true
  }
  return (
    <Content>
      <Row>
        <Col span={1} />
        <Col span={22} className='pc__container'>
          <div className='pc__leftContainer'>
            <Row>
              <div className='pc__container__carousel'>
                <Carousel {...settings}>
                  <img src="https://cms-bucket.nosdn.127.net/2018/11/15/48eb29eb68cd4b5797b70c47a253d230.jpeg?imageView&thumbnail=600y250" alt='' className='pc__container__carousel__img' />
                  <img src="https://cms-bucket.nosdn.127.net/2018/11/15/55812b4c82084beeafe310c0b8ebb93a.jpeg?imageView&thumbnail=600y250" alt='' className='pc__container__carousel__img' />
                  <img src="https://cms-bucket.nosdn.127.net/2018/11/15/48eb29eb68cd4b5797b70c47a253d230.jpeg?imageView&thumbnail=600y250" alt='' className='pc__container__carousel__img' />
                  <img src="https://cms-bucket.nosdn.127.net/2018/11/15/55812b4c82084beeafe310c0b8ebb93a.jpeg?imageView&thumbnail=600y250" alt='' className='pc__container__carousel__img' />
                </Carousel>
              </div>
            </Row>
            <Row>
              <PCBewsImageBlock count={6} type='guoji' width='400px' cardTitle='国际头条' imageWidth='111px'></PCBewsImageBlock>
            </Row>
          </div>
          <Tabs className='pc__container__tabsnews'>
            <TabPane tab='头条新闻' key='1'>
              <PCNewsBlock count={20} type='top' />
            </TabPane>
            <TabPane tab='国际' key='2'>
              <PCNewsBlock count={20} type='guoji' />
            </TabPane>
          </Tabs>
          <Tabs className='pc__product'>
            <TabPane tab='ReactNews产品'>
              <PCProduct />
            </TabPane>
          </Tabs>
          <PCBewsImageBlock count={9} type='yule' width='100%' cardTitle='娱乐新闻' imageWidth='129px'></PCBewsImageBlock>
          <PCBewsImageBlock count={18} type='guonei' width='100%' cardTitle='国内新闻' imageWidth='129px'></PCBewsImageBlock>
        </Col>
        <Col span={1} />
      </Row>
    </Content>
  )
}

export default PCNewsContainer